<template>
    <div class="msg">
        <div class="be-center">
            <div class="main-msg">
                {{infoText}}
            </div>

            <el-collapse-transition>
                <div 
                v-if="redirectAgain"
                class="timer-text"
                >
                    {{timerText}}秒后返回首页
                </div>
            </el-collapse-transition>

            <el-button
            type="primary"
            class="btn"
            @click="reloadHandler"
            >
                刷新页面
            </el-button>
        </div>
    </div>
</template>

<script>
import CONFIG_PROJECT from '@config/project';

export default {
    components: {

    },
    data: () => ({
        timerText: 5,
    }),
    computed: {
        infoText() {
            return this.$route.query.info || '出错啦！'
        },
        redirectAgain() {
            return this.$route.query.redirectagain;
        },
    },
    methods: {
        reloadHandler() {
            var redirectfrom = this.$route.query.redirectfrom;

            if (redirectfrom) {
                var reloadUrl = `${redirectfrom}${/\?/.test(redirectfrom) ? '&' : '?'}redirectagain=true`;

                window.location.replace(reloadUrl);
            } else {
                window.location.reload();
            }
        },
        initTimer() {
            if (!this.redirectAgain) return;

            var interval = setInterval(() => {
                this.timerText--;

                if (this.timerText < 1) {
                    clearInterval(interval);
                    
                    this.$router.push('/');
                }
            }, 1000);
        }
    },
    mounted() {
        this.initTimer();
    },
}
</script>

<style lang="scss" scoped>
    .msg{
        height: 600px;
        position: relative;

        .be-center{
            top: 40%;
            text-align: center;
        }

        .main-msg{
            font-size: 30px;
            font-weight: bold;
            color: #666;
        }

        .timer-text{
            color: #999;
            margin-top: 1em;
        }

        .btn{
            margin-top: 2em;
            padding-left: 3em;
            padding-right: 3em;
        }
    }
</style>
 